<template>
	<view class="vh-100 vw-100 bg">
		<view class="c-img h-375" :style="`background-image: url('${WEBCONFIG?.cbg}');`">
			<view class="flex flex-column mx-20" :style="`padding-top:${ bottom + 24 }px;`">
				<text class="fw-600 fs-30 pb-10 text-ellipsis-1">{{WEBCONFIG?.classification_title}}</text>
				<text class="fw-600 fs-14 text-grey-4 text-ellipsis-1">{{WEBCONFIG?.classification_desc}}</text>
			</view>
			<view class="px-16 flex flex-x-space-between flex-wrap mt-30">
				<view
					class="item  px-8 position-relative py-20 bg-white rounded-6 mt-20 flex flex-y-center flex-x-space-between"
					style="width: 42%;" v-for="(item,index) in props.list" :key='index'
					@click="selClassification(item)">
					<text class="fs-16 fw-600 line">{{item.name}}</text>
					<image class="w-50 h-50 " :src="item.image"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { ref, onMounted, defineEmits, defineProps, watch } from 'vue';
	import { $http } from '@/utils';
	import { useStorage } from '@/utils/storeage';
	import { useRefs, useWebConfigStore } from "@/stores/index";
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	// #ifndef H5
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	// #endif
	// #ifdef H5
	const bottom = 0
	// #endif
	const props = defineProps({
		list: {
			type: Array,
			default: []
		},
		status: {
			default: true,
			type: Boolean
		}
	})

	watch(() => props.status, (e) => {
		console.log(e)
		if (e) {
			uni.hideTabBar()
		}
	})
	const id = ref(0)
	const emit = defineEmits(['close'])
	onMounted(() => {
		if (props.status) {
			uni.hideTabBar()
		}
	})
	const selClassification = (e) => {
		if (WEBCONFIG.value.custom_tabbar == '2') {
			uni.showTabBar()
		}
		useStorage().set('CATEGORY', e.id)
		useStorage().set('CATEGORYNAME', e.name)
		emit('close', e)
	}
</script>

<style scoped>
	.h-375 {
		height: 750rpx;
	}

	.line {
		background: linear-gradient(90deg, rgba(49, 111, 255, 0.2) 0%, rgba(49, 125, 255, 0) 100%);
		background-size: 100% 16rpx;
		background-repeat: no-repeat;
		background-position: bottom left;
	}

	.item {
		box-shadow: 2px 3px 10px -3px #d0d0d0;
	}
</style>